<template>
  <ul class="single-select" :class="{'is-flex': flex}">
    <slot></slot>
  </ul>
</template>

<script>
  export default {
    name: "singleSelect",
    props: {
      value: [String, Number],
      flex: Boolean
    }
  }
</script>

<style scoped lang="scss">
  .single-select {
    margin: 0 -10px;
    &.is-flex {
      display: flex;
      li {
        flex: 1;
        text-align: center;
        padding: 20px 0;
        margin: 0 10px;
      }
    }
    li {
      border: 2px solid $colorGrey;
      display: inline-block;
      padding: 10px 50px;
      margin: 0 5px;
      border-radius: $radius;
      color: $colorGrey;
      &.active {
        color: $mainColor;
        border-color: $mainColor;
      }
    }
  }
</style>
